<template>
  <!-- <div class="row">
    <div class="col-3">
      <h3>选题1</h3>
      <draggable
        class="list-group"
        :list="list1"
        group="people"
        @change="log"
        itemKey="name"
      >
        <template #item="{ element, index }">
          <div class="list-group-item">{{ element.name }} {{ index }}</div>
        </template>
      </draggable>
    </div>

    <div class="col-3">
      <h3>选题2</h3>
      <draggable
        class="list-group"
        :list="list2"
        group="people"
        @change="log"
        itemKey="name"
      >
        <template #item="{ element }">
          <el-button>{{ element.name }}</el-button>
        </template>
      </draggable>
    </div>
  </div> -->
  <el-container
    class="layout-container-demo"
    style="height: 100%; width: 100%; border: 1px solid #eee"
  >
    <el-aside width="600px" style="background-color: rgb(238, 241, 246)">
      <el-scrollbar>
        <el-menu :default-openeds="['1', '3']">
          <el-sub-menu index="1">
            <template #title>
              <el-icon><Menu /></el-icon>请在此拖动试题到试卷上面
            </template>
            <el-menu-item-group title="题型">
              <el-select
                placeholder="题型"
                style="width: 50%"
                v-model="limit.topicType"
              >
                <el-option :value="null">全选</el-option>
                <el-option value="single">单选题</el-option>
                <el-option value="mult">多选题</el-option>
                <el-option value="fill">填空题</el-option>
                <el-option value="judge">判断题</el-option>
                <el-option value="answer">简答题</el-option>
                <el-option value="design">算法设计题</el-option>
              </el-select>
            </el-menu-item-group>
            <el-menu-item-group title="内容">
              <el-input
                v-model="limit.topicContent"
                placeholder="搜索"
                style="width: 50%"
              >
                <template #prefix>
                  <el-icon class="el-input__icon"><search /></el-icon>
                </template>
              </el-input>
            </el-menu-item-group>
            <el-menu-item-group>
              <template #title>单选题</template>
              <topicItem :list="singleTopic" group="single"></topicItem>
            </el-menu-item-group>
            <el-menu-item-group title="多选题">
              <topicItem :list="multTopic" group="mult"></topicItem>
            </el-menu-item-group>
            <el-menu-item-group title="填空题">
              <topicItem :list="fillTopic" group="fill"></topicItem>
            </el-menu-item-group>
            <el-menu-item-group title="简答">
              <topicItem :list="answerTopic" group="answer"></topicItem>
            </el-menu-item-group>
            <el-menu-item-group title="判断">
              <topicItem :list="judgeTopic" group="judge"></topicItem>
            </el-menu-item-group>
            <el-menu-item-group title="算法设计题">
              <topicItem :list="designTopic" group="design"></topicItem>
            </el-menu-item-group>
          </el-sub-menu>
          <el-sub-menu index="2">
            <template #title>
              <el-icon><setting /></el-icon>补充信息
            </template>
            <el-menu-item-group>
              <template #title>科目</template>
              <el-menu-item index="2-1">
                <el-input v-model="data.examName"></el-input>
              </el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="学年-学期">
              <el-menu-item index="2-3">
                学年：<el-input
                  v-model="data.examYear"
                  placeholder="请输入学年"
                >
                </el-input>
                学期：
                <el-input
                  v-model="data.examTerm"
                  placeholder="请输入学期"
                ></el-input>
              </el-menu-item>
            </el-menu-item-group>
            <el-sub-menu index="2-4">
              <template #title>试卷属性</template>
              <el-menu-item index="2-4-1">
                开卷
                <el-radio-group style="padding: 2rem" v-model="data.examOpen">
                  <el-radio-button label="0">闭卷</el-radio-button>
                  <el-radio-button label="1">开卷</el-radio-button>
                </el-radio-group>
              </el-menu-item>
              <el-menu-item index="2-4-2">
                AB卷
                <el-radio-group style="padding: 2rem" v-model="data.examAb">
                  <el-radio-button label="A">A卷</el-radio-button>
                  <el-radio-button label="B">B卷</el-radio-button>
                </el-radio-group>
              </el-menu-item>
              <el-menu-item index="2-4-3">
                考试时长
                <el-input v-model="data.examTime" style="padding-left: 1rem">
                </el-input>
              </el-menu-item>
            </el-sub-menu>
          </el-sub-menu>
        </el-menu>
      </el-scrollbar>
    </el-aside>

    <el-container>
      <el-header style="text-align: right; font-size: 12px">
        <div class="toolbar">
          <!-- <el-dropdown>
            <el-icon style="margin-right: 8px; margin-top: 1px"
              ><setting
            /></el-icon>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>View</el-dropdown-item>
                <el-dropdown-item>Add</el-dropdown-item>
                <el-dropdown-item>Delete</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown> -->
          <span>试卷来啦</span>
        </div>
      </el-header>

      <el-main>
        <el-scrollbar>
          <el-space direction="vertical">
            <!-- 单选 -->
            <el-card class="box-card" style="width: 1000px">
              <template #header>
                <div class="card-header">
                  <span>单选题</span>
                </div>
              </template>
              <draggable
                class="list-group"
                :list="ExamEntity.examSingle"
                group="single"
                animation="500"
                itemKey="topicContent"
              >
                <template #item="{ element }">
                  <div
                    class="text item"
                    style="border: 1px solid #ccc; padding: 8px"
                  >
                    {{ element.topicContent }}
                    <br />
                    选项: {{ element.topicSelect.split("#!") }} 答案:{{
                      element.topicAnswer.split("#!")
                    }}
                  </div>
                </template>
              </draggable>
            </el-card>
            <!-- 多选 -->
            <el-card class="box-card" style="width: 1000px">
              <template #header>
                <div class="card-header">
                  <span>多选题</span>
                </div>
              </template>
              <draggable
                class="list-group"
                :list="ExamEntity.examMult"
                group="mult"
                animation="500"
                itemKey="topicContent"
              >
                <template #item="{ element }">
                  <div
                    class="text item"
                    style="border: 1px solid #ccc; padding: 8px"
                  >
                    {{ element.topicContent }}
                    <br />
                    选项: {{ element.topicSelect.split("#!") }} 答案:{{
                      element.topicAnswer.split("#!")
                    }}
                  </div>
                </template>
              </draggable>
            </el-card>
            <!-- 填空 -->
            <el-card class="box-card" style="width: 1000px">
              <template #header>
                <div class="card-header">
                  <span>填空题</span>
                </div>
              </template>
              <draggable
                class="list-group"
                :list="ExamEntity.examFill"
                group="fill"
                animation="500"
                itemKey="topicContent"
              >
                <template #item="{ element }">
                  <div
                    class="text item"
                    style="border: 1px solid #ccc; padding: 8px"
                  >
                    {{ element.topicContent }}
                    <br />
                    选项: {{ element.topicSelect.split("#!") }}
                    <br />

                    答案:{{ element.topicAnswer.split("#!") }}
                  </div>
                </template>
              </draggable>
            </el-card>
            <!-- 简答 -->
            <el-card class="box-card" style="width: 1000px">
              <template #header>
                <div class="card-header">
                  <span>简答题</span>
                </div>
              </template>
              <draggable
                class="list-group"
                :list="ExamEntity.examAnswer"
                group="answer"
                animation="500"
                itemKey="topicContent"
              >
                <template #item="{ element }">
                  <div
                    class="text item"
                    style="border: 1px solid #ccc; padding: 8px"
                  >
                    {{ element.topicContent }}
                    <br />
                    选项: {{ element.topicSelect.split("#!") }}
                    <br />

                    答案:{{ element.topicAnswer.split("#!") }}
                  </div>
                </template>
              </draggable>
            </el-card>
            <!-- 判断 -->
            <el-card class="box-card" style="width: 1000px">
              <template #header>
                <div class="card-header">
                  <span>判断题</span>
                </div>
              </template>
              <draggable
                class="list-group"
                :list="ExamEntity.examJudge"
                group="judge"
                animation="500"
                itemKey="topicContent"
              >
                <template #item="{ element }">
                  <div
                    class="text item"
                    style="border: 1px solid #ccc; padding: 8px"
                  >
                    {{ element.topicContent }}
                    <br />
                    选项: {{ element.topicSelect.split("#!") }}
                    <br />

                    答案:{{ element.topicAnswer.split("#!") }}
                  </div>
                </template>
              </draggable>
            </el-card>
            <!-- 算法设计题 -->
            <el-card class="box-card" style="width: 1000px">
              <template #header>
                <div class="card-header">
                  <span>算法设计题</span>
                </div>
              </template>
              <draggable
                class="list-group"
                :list="ExamEntity.examDesign"
                group="design"
                animation="500"
                itemKey="topicContent"
              >
                <template #item="{ element }">
                  <div
                    class="text item"
                    style="border: 1px solid #ccc; padding: 8px"
                  >
                    {{ element.topicContent }}
                    <br />
                    选项: {{ element.topicSelect.split("#!") }}
                    <br />

                    答案:{{ element.topicAnswer.split("#!") }}
                  </div>
                </template>
              </draggable>
            </el-card>
          </el-space>
        </el-scrollbar>
      </el-main>

      <div>
        <el-button :span="6" type="info">重置</el-button>
        <el-button :span="6" type="success" @click="submitExam()"
          >保存试卷</el-button
        >
      </div>
    </el-container>
  </el-container>
</template>
 
<script>
import { reactive, toRefs, onMounted, ref, computed, watchEffect, watch } from "vue";
import draggable from "vuedraggable";
import { Menu } from "@element-plus/icons";
import topicItem from "./topicItem.vue";
import { getAllType } from "../../../api/topic";
import { saveExam } from "../../../api/exam";
import { getTopic } from "../../../api/topic";
import { Calendar, Search } from '@element-plus/icons-vue'
export default {
  name: "dragAndDrop",
  components: { draggable, topicItem },
  setup () {
    const item = {
      name: "2016-05-02",
      id: "Tom",
    };
    let data = {
      examId: null,
      examName: "数据结构",
      examAb: "A",
      examOpen: "0",
      examType: null,
      examYear: new Date().getFullYear(),
      examTerm: 1,
      examSingle: [],
      examMult: [],
      examFill: [],
      examJudge: [],
      examAnswer: [],
      examDesign: [],
      examTime: 120
    };

    const limit = ref({
      topicId: null,
      topicName: null,
      topicAuthor: "1",
      topicDomain: null,
      topicType: null,
      topicContent: null,
      topicSelect: null,
      topicAnswer: null,
      topicKnow: null,
      topicHard: null,
      topicCreate: null,
      topicScore: null
    })


    watch(limit.value, (curVal, preVal) => {
      getTopic(limit.value).then((res) => {

        state.topiclist = res.data;
        state.singleTopic.length = 0;
        state.multTopic.length = 0;
        state.fillTopic.length = 0;
        state.judgeTopic.length = 0;
        state.answerTopic.length = 0;
        state.designTopic.length = 0;
        for (var i in res.data) {
          if (res.data[i].topicType == "single") {
            state.singleTopic.push(res.data[i]);
          }
          if (res.data[i].topicType == "mult") {
            state.multTopic.push(res.data[i]);
          }
          if (res.data[i].topicType == "fill") {
            state.fillTopic.push(res.data[i]);
          }
          if (res.data[i].topicType == "design") {
            state.designTopic.push(res.data[i]);
          }
          if (res.data[i].topicType == "answer") {
            state.answerTopic.push(res.data[i]);
          }
          if (res.data[i].topicType == "judge") {
            state.judgeTopic.push(res.data[i]);
          }
        }

      });
    })


    function submitExam () {
      for (var i in total.value) {
        if (total.value[i].topicType == "single") {
          data.examSingle.push(total.value[i].topicId)
        }
        if (total.value[i].topicType == "mult") {
          data.examMult.push(total.value[i].topicId)
        }
        if (total.value[i].topicType == "fill") {
          data.examFill.push(total.value[i].topicId)
        }
        if (total.value[i].topicType == "design") {
          data.examDesign.push(total.value[i].topicId)
        }
        if (total.value[i].topicType == "answer") {
          data.examAnswer.push(total.value[i].topicId)
        }
        if (total.value[i].topicType == "judge") {
          data.examJudge.push(total.value[i].topicId)
        }
      }
      let data2 = {
        examSingle: data.examSingle.toString(),
        examDesign: data.examDesign.toString(),
        examAnswer: data.examAnswer.toString(),
        examJudge: data.examJudge.toString(),
        examMult: data.examMult.toString(),
        examFill: data.examFill.toString(),
        examAb: data.examAb.toString(),
        examOpen: data.examOpen,
        examType: data.examType,
        examTerm: data.examTerm,
        examYear: data.examYear,
        examTime: data.examTime,
        examName: data.examName
      }
      console.log(data2);
      saveExam(data2).then((res) => {
        console.log(res);
      })

    }

    //获取数据
    const getInfo = onMounted(() => {

    });

    const total = computed(() => {
      return (ExamEntity.value.examSingle).concat(
        ExamEntity.value.examMult.concat(ExamEntity.value.examFill).concat(ExamEntity.value.examJudge).concat(ExamEntity.value.examAnswer).concat(ExamEntity.value.examDesign)
      );
    });

    const ExamEntity = ref({
      examSingle: [],
      examMult: [],
      examFill: [],
      examJudge: [],
      examAnswer: [],
      examDesign: []
    });

    function log () {
      console.log("yes");
    }
    const state = reactive({
      drag: false,
      topiclist: [],
      options: [
        {
          value: "Option1",
          label: "Option1",
        },
        {
          value: "Option2",
          label: "Option2",
        },
        {
          value: "Option3",
          label: "Option3",
        },
        {
          value: "Option4",
          label: "Option4",
        },
        {
          value: "Option5",
          label: "Option5",
        },
      ],
      singleTopic: [],
      multTopic: [],
      fillTopic: [],
      answerTopic: [],
      designTopic: [],
      judgeTopic: []
    });

    onMounted(() => { });
    return {
      ...toRefs(state),
      log,
      submitExam,
      ExamEntity,
      limit,
      data
    };
  },
};
</script>
 
<style scoped>
.title {
  text-align: left;
}
.wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}
.item {
  width: 100%;
  text-align: left;
  margin: 5px;
}
.layout-container-demo .el-header {
  position: relative;
  background-color: #b3c0d1;
  color: var(--el-text-color-primary);
}
.layout-container-demo .el-aside {
  width: 340px;
  color: var(--el-text-color-primary);
  background: #fff !important;
  border-right: solid 1px #e6e6e6;
  box-sizing: border-box;
}
.layout-container-demo .el-menu {
  border-right: none;
}
.layout-container-demo .el-main {
  padding: 0;
}
.layout-container-demo .toolbar {
  position: absolute;
  display: inline-flex;
  align-items: center;
  top: 50%;
  right: 20px;
  transform: translateY(-50%);
}
</style>